<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Dashboard</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">


    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" th:href="@{/bower_components/bootstrap/dist/css/bootstrap.min.css}" type="text/css">

    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/bower_components/font-awesome/css/font-awesome.min.css}" type="text/css">
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/bower_components/Ionicons/css/ionicons.min.css}" type="text/css">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/dist/css/AdminLTE.min.css}" type="text/css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" th:href="@{/dist/css/skins/_all-skins.min.css}" type="text/css">
    <!-- Morris chart -->
    <link rel="stylesheet" th:href="@{/bower_components/morris.js/morris.css}" type="text/css">
    <!-- jvectormap -->
    <link rel="stylesheet" th:href="@{/bower_components/jvectormap/jquery-jvectormap.css}" type="text/css">
    <!-- Date Picker -->
    <link rel="stylesheet" th:href="@{/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css}"
          type="text/css">
    <!-- Daterange picker -->
    <link rel="stylesheet" th:href="@{/bower_components/bootstrap-daterangepicker/daterangepicker.css}" type="text/css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" th:href="@{/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css}" type="text/css">

    <!--layui css-->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">


</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
<div class="wrapper">
    <header class="main-header">
        <div th:include="common/head :: head"></div>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <div th:include="common/left :: left"></div>
        </section>
        <!-- /.sidebar -->
    </aside>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <h1 class="profile-username text-center">课程发布</h1>
        <!-- Main content -->
        <section class="content">
            <!-- /.row -->
            <div class="row">
                <div class="layui-form layui-form-pane demoTable">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">课程名称</label>
                            <div class="layui-input-inline">
                                <input name="coursename" class="layui-input" type="text" id="coursename">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">课程状态</label>
                            <div class="layui-input-inline">
                                <select name="coursestatusid" id="coursestatusid">
                                    <option value=""></option>
                                    <option th:each="ccc:${Coursestatuss}"
                                            th:value="${ccc.coursestatusid}"
                                            th:text="${ccc.statusname}">
                                    </option>

                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">所属类别</label>
                            <div class="layui-input-inline">
                                <select name="categoryid" id="categoryid">
                                    <option value=""></option>
                                    <option th:each="u:${categorylists}"
                                            th:value="${u.categoryid}"
                                            th:text="${u.categoryname}">
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">难度等级</label>
                            <div class="layui-input-inline">
                                <select name="differentid" id="differentid" lay-filter="differentid">

                                    <option value=""></option>
                                    <option th:each="cd:${CourseDifferents}"
                                            th:value="${cd.differentid}"
                                            th:text="${cd.differentname}">
                                    </option>
                                </select>
                            </div>

                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">起始时间</label>
                            <div class="layui-input-inline">
                                <input type="date" name="starttime" id="starttime" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">终止时间</label>
                            <div class="layui-input-inline">
                                <input type="date" name="endtime" id="endtime" class="layui-input">
                            </div>
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn " data-type="reload">查询</button>

                            <a href="/backpublish">
                                <button class="layui-btn layui-btn-primary " type="reset" id="reset">重置</button>
                            </a>
                        </div>
                    </div>

                </div>

            </div>
            <div class="clearfix"></div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_content">
                            <!--lay-filter="demo"-->
                            <table class="layui-hide" id="test"  lay-filter="demo"></table>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->


    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <div th:include="common/footer :: footer"></div>
    </footer>
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script th:src="@{/bower_components/jquery/dist/jquery.min.js}" type="text/javascript"></script>
<!-- jQuery UI 1.11.4 -->
<script th:src="@{/bower_components/jquery-ui/jquery-ui.min.js}" type="text/javascript"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/bower_components/bootstrap/dist/js/bootstrap.min.js}" type="text/javascript"></script>
<!-- Morris.js charts -->
<script th:src="@{/bower_components/raphael/raphael.min.js}" type="text/javascript"></script>
<script th:src="@{/bower_components/morris.js/morris.min.js}" type="text/javascript"></script>
<!-- Sparkline -->
<script th:src="@{/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js}" type="text/javascript"></script>
<!-- jvectormap -->
<script th:src="@{/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js}" type="text/javascript"></script>
<script th:src="@{/plugins/jvectormap/jquery-jvectormap-world-mill-en.js}" type="text/javascript"></script>
<!-- jQuery Knob Chart -->
<script th:src="@{/bower_components/jquery-knob/dist/jquery.knob.min.js}" type="text/javascript"></script>
<!-- daterangepicker -->
<script th:src="@{/bower_components/moment/min/moment.min.js}" type="text/javascript"></script>
<script th:src="@{/bower_components/bootstrap-daterangepicker/daterangepicker.js}" type="text/javascript"></script>
<!-- datepicker -->
<script th:src="@{/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js}"
        type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<script th:src="@{/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js}" type="text/javascript"></script>
<!-- Slimscroll -->
<script th:src="@{/bower_components/jquery-slimscroll/jquery.slimscroll.min.js}" type="text/javascript"></script>
<!-- FastClick -->
<script th:src="@{/bower_components/fastclick/lib/fastclick.js}" type="text/javascript"></script>
<!-- AdminLTE App -->
<script th:src="@{/dist/js/adminlte.min.js}" type="text/javascript"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script th:src="@{/dist/js/pages/dashboard.js}" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/dist/js/demo.js}" type="text/javascript"></script>
<!--layui js-->
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>

<script type="text/javascript">
    $(function () {
        $('.sidebar-menu li:not(.treeview) > a').on('click', function () {
            console.log(this.href);
            var $parent = $(this).parent().addClass('active');
            $parent.siblings('.treeview.active').find('> a').trigger('click');
            $parent.siblings().removeClass('active').find('li').removeClass('active');
        });
        $('.sidebar-menu a').each(function () {
            if (this.href === window.location.href) {
                $(this).parent().addClass('active')
                    .closest('.treeview-menu').addClass('.menu-open')
                    .closest('.treeview').addClass('active');
            }
        });
    });
</script>


<script type="text/javascript" th:inline="none">
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '/educationquerycourse'
            , cellMinWidth: 80
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false//不显示首页
                , last: false //不显示尾页

            }, cols: [[
                {field: 'coursename', title: '课程名'}
                , {field: 'simpledescribe', title: '简单描述'}
                , {field: 'createtime', title: '创建时间'}
                , {field: 'statusname', title: '课程状态'}
                , {field: 'differentname', title: '难度级别'}
                , {field: 'categoryname', title: '所属分类'}
                , {width: 178, title: '操作', toolbar: "#barDemo"}
            ]]

        });
        // /*条件*/
        var $ = layui.$, active = {
            reload: function () {
                var coursename = $('#coursename');
                var coursestatusid = $('#coursestatusid');
                var categoryid = $('#categoryid');
                var differentid = $('#differentid');
                var starttime = $('#starttime');
                var endtime = $('#endtime');


                table.reload('test', {
                    page: {
                        curr: 1//重新从第一页开始
                    },
                    where: {
                        coursename: coursename.val(),
                        coursestatusid: coursestatusid.val(),
                        categoryid: categoryid.val(),
                        differentid: differentid.val(),
                        starttime: starttime.val(),
                        endtime: endtime.val()
                    },
                    url: 'publisheducationquerycoursed',
                    method: 'post'
                });
            }
        };
        //这个是用于创建点击事件的实例

        $('.demoTable .layui-btn').on('click', function () {

            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
<script id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="shenhe">审核</a>
    <a class="layui-btn layui-btn-xs" lay-event="publish">发布</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="xiajia">下架</a>
</script>

<!--官方操作-->
<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'shenhe'){
                layer.confirm('确认提交审核？', function(index){
                    if(data.coursestatusid=='3'|| data.coursestatusid=='1'){
                        $.ajax({
                            url: "decidecourse",
                            data:{"courseid":data.courseid},
                            type: "POST",
                            success: function (result) {
                                if(result!="0"){
                                    $.ajax({
                                        url: "updatestatus",
                                        data:{"courseid":data.courseid,"coursestatusid":2},
                                        type: "POST",
                                        success: function (result) {
                                            if(result!="0"){
                                                layer.alert("提交完成！");


                                                history.go(0);


                                            }else{
                                                layer.alert("提交失败！请重试！")
                                            }
                                        }
                                    });



                                }else{
                                    layer.alert("还未发布课节，请先发布课节再提交！");
                                }
                            }
                        });





                    }else{
                        layer.alert("必须为待提交或审核未通过状态！");
                    }

                });


            } else if(obj.event === 'publish'){
                layer.confirm('确认发布？', function(index){
                    if(data.coursestatusid=='4'){
                        $.ajax({
                            url: "updatestatus",
                            data:{"courseid":data.courseid,"coursestatusid":5},
                            type: "POST",
                            success: function (result) {
                                if(result!="0"){
                                    layer.alert("发布完成！");

                                    history.go(0);

                                }else{
                                    layer.alert("发布失败！请重试！")
                                }
                            }
                        });
                    }else{
                        layer.alert("该课程为非可发布状态，请先提交审核或下架！");
                    }

                });
            } else if(obj.event === 'xiajia'){
                layer.confirm('确认下架？', function(index){
                    if(data.coursestatusid=='5'){
                        $.ajax({
                            url: "updatestatus",
                            data:{"courseid":data.courseid,"coursestatusid":4},
                            type: "POST",
                            success: function (result) {
                                if(result!="0"){
                                    layer.alert("下架完成！");
                                    history.go(0);
                                }else{
                                    layer.alert("下架失败！请重试！")
                                }
                            }
                        });
                    }else{
                        layer.alert("该课程必须为已发布状态，请先发布课程！");
                    }

                });
            }
        });

        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>


</body>
</html>
